<script setup lang="ts">
import { ref } from 'vue';
import { getMessageList, exportMessage } from "@/api/message";
import { messagePageVO, messageQuery } from "@/api/message/types";
import type { FormInstance } from 'element-plus';

const loading = ref(false); //  加载状态
const queryFormRef = ref<FormInstance>();
const queryParams = reactive<messageQuery>({
  pageNo: 1,
  pageSize: 10,
  senderId: undefined as string | undefined,
  senderType: undefined as 0 | 1 | 2 | undefined,
  createBy: undefined as string | undefined,
  message: undefined as string | undefined,
  startTime: undefined as string | undefined,
  endTime: undefined as string | undefined,
});
const dateTimeRange = ref("");
const total = ref(0); // 数据总数
const pageData = ref<messagePageVO[]>(); // 分页数据

/**
 * 监听时间范围变化
 */
watch(dateTimeRange, (newVal) => {
  if (newVal) {
    queryParams.startTime = newVal[0];
    queryParams.endTime = newVal[1];
  }
});

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  getMessageList(queryParams)
      .then(({ data }) => {
        console.log(data);
        pageData.value = data.list;
        total.value = data.total;
      })
      .finally(() => {
        loading.value = false;
      });
}

/**
 * 发送者类型格式化
 */
function senderTypeFormatter(row: messagePageVO) {
  switch (row.senderType) {
    case 0:
      return "访客";
    case 1:
      return "客服";
    case 2:
      return "机器人";
    default:
      return "未知";
  }
}

/**
 * 重置查询
 */
function resetQuery(){
  if (!queryFormRef.value) return;
  queryFormRef.value.resetFields();
  dateTimeRange.value = "";
  queryParams.senderId=undefined;
  queryParams.senderType=undefined;
  queryParams.createBy=undefined;
  queryParams.message=undefined;
  handleQuery();
}

/**
 * 导出聊天数据
 */
function handleExport() {
  exportMessage(queryParams).then((response: any) => {
    const fileData = response.data;
    const fileName = decodeURI(
        response.headers["content-disposition"].split(";")[1].split("=")[1]
    );
    const fileType = "application/vnd.ms-excel;charset=utf-8";

    const blob = new Blob([fileData], { type: fileType });
    const downloadUrl = window.URL.createObjectURL(blob);

    const downloadLink = document.createElement("a");
    downloadLink.href = downloadUrl;
    downloadLink.download = fileName;

    document.body.appendChild(downloadLink);
    downloadLink.click();

    document.body.removeChild(downloadLink);
    window.URL.revokeObjectURL(downloadUrl);
  });
}

onMounted(() => {
  handleQuery();
});
</script>

<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="发送人:" value="senderId">
          <el-input
              v-model="queryParams.senderId"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item label="发送人类型:" value="senderType">
          <el-select
              v-model="queryParams.senderType"
              placeholder="全部"
              clearable
              class="!w-[100px]"
          >
            <el-option label="访客" value="0" />
            <el-option label="客服" value="1" />
            <el-option label="机器人" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="公司名称" value="createBy">
          <el-input
              v-model="queryParams.createBy"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item label="消息内容" value="message">
          <el-input
              v-model="queryParams.message"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item label="发送时间">
          <el-date-picker
              class="!w-[240px]"
              v-model="dateTimeRange"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="截止时间"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery"
          ><i-ep-search />搜索</el-button
          >
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <template #header>
        <div>
          <el-button class="ml-3" @click="handleExport">
            <template #icon><i-ep-download /></template>
            导出聊天数据
          </el-button>
        </div>
      </template>

      <el-table
          height="650"
          v-loading="loading"
          :data="pageData"
      >
<!--        <el-table-column type="selection" width="50" align="center" />-->
        <el-table-column label="序号" align='center'>
          <template #default="scope">
            {{ scope.$index + ((queryParams.pageNo || 1) - 1) * (queryParams.pageSize || 10) + 1 }}
          </template>
        </el-table-column>

        <el-table-column
            key="senderId"
            label="发送人"
            align="center"
            prop="senderId"
        />
        <el-table-column
            key="senderType"
            label="发送类型"
            align="center"
            prop="senderType"
            :formatter="senderTypeFormatter"
        />
        <el-table-column
            key="createBy"
            label="公司名称"
            align="center"
            prop="createBy"
        />
        <el-table-column
            key="message"
            label="消息内容"
            align="center"
            prop="message"
        />
        <el-table-column
            key="createTime"
            label="发送时间"
            align="center"
            prop="createTime"
        />
        <el-table-column
            key="digitalFingerprint"
            label="访客指纹唯一ID"
            align="center"
            prop="digitalFingerprint"
        />
      </el-table>


      <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="handleQuery"
      />
    </el-card>

  </div>
</template>

<style scoped>

</style>